$(document).ready(function () {


  function infoBackTop () {
    var backToTopBtn = $("#dm-back-to-top");
    function checkBackToTopVisibility () {
      var scrollTop = $(window).scrollTop();
      if (scrollTop > $(window).height()) {
        backToTopBtn.fadeIn(); // 显示按钮
      } else {
        backToTopBtn.fadeOut(); // 隐藏按钮
      }
    }

    // 页面加载时立即检查并设置按钮状态
    checkBackToTopVisibility();
    // 监听滚动事件
    $(window).scroll(checkBackToTopVisibility);
    backToTopBtn.click(function (event) {
      event.preventDefault();
      $("html, body").animate({ scrollTop: 0 }, "slow");
    });
  }
  infoBackTop()

  // 打开菜单
  $('.menu-wrapper').click(function () {
    $('.mobile-drop-down').slideToggle("fast")
  })

  // 关闭菜单
  $('.close-icon').click(function () {
    $('.mobile-drop-down').slideUp("fast")
  })

  // 点击一级菜单显示二级菜单
  $('.first-nav-title  .put-icon').click(function () {
    var secondNav = $(this).parent().next();
    if (secondNav.css("display") == "none") {
      $(this).css({ transform: "rotate(180deg)" });
      secondNav.slideDown("fast");
    } else {
      $(this).css({ transform: "rotate(0)" });
      secondNav.slideUp("fast");
    }
  })

  // 移动端-打开搜索
  $(".dm-mobile-search .search-icon").click(function () {
    $(".dm-main-header-input").slideToggle("fast");
  })

  // 移动端-关闭搜索
  $(".close-icon-wrapper .close-icon").click(function () {
    $(".dm-main-header-input").slideUp("fast");
  })

  // PC端-打开搜索
  $('.dm-wish .dm-header-search').click(function () {
    $(".dm-main-header-input").slideToggle("fast");
  })

  // 渲染公共无数据界面
  function renderNoData ($container) {
    $container.append(`
       <div class="no-data-content">
          <div class="loading-text-top">
          <div class="loading-info">
<svg width="89" height="88" viewBox="0 0 89 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M75.861 67.254C76.1415 67.254 76.4001 66.979 76.4001 66.682C76.4001 66.385 76.1415 66.1155 75.861 66.1155C75.5805 66.1155 75.322 66.3905 75.322 66.682C75.322 66.979 75.5805 67.254 75.861 67.254ZM63.7821 80.432C63.9801 80.641 64.2606 80.762 64.5356 80.762C64.6779 80.7616 64.8187 80.7321 64.9492 80.6753C65.0797 80.6186 65.1973 80.5358 65.2947 80.432C65.4937 80.2141 65.6041 79.9296 65.6041 79.6345C65.6041 79.3394 65.4937 79.0549 65.2947 78.837C65.1971 78.7335 65.0795 78.6508 64.949 78.5941C64.8185 78.5374 64.6779 78.5077 64.5356 78.507C64.3942 78.5082 64.2545 78.538 64.125 78.5947C63.9955 78.6515 63.8788 78.7339 63.7821 78.837C63.5818 79.0543 63.4707 79.339 63.4707 79.6345C63.4707 79.93 63.5818 80.2147 63.7821 80.432ZM47.9683 87.505C48.2653 87.8185 48.6833 88 49.1014 88C49.3138 87.998 49.5237 87.9531 49.7184 87.868C49.9131 87.783 50.0886 87.6595 50.2345 87.505C50.5368 87.1778 50.7046 86.7487 50.7046 86.3032C50.7046 85.8578 50.5368 85.4287 50.2345 85.1015C50.0891 84.946 49.9138 84.8215 49.7191 84.7355C49.5243 84.6495 49.3142 84.6037 49.1014 84.601C48.8889 84.603 48.679 84.6479 48.4843 84.733C48.2896 84.818 48.1141 84.9415 47.9683 85.096C47.6644 85.4235 47.4956 85.8538 47.4956 86.3005C47.4956 86.7472 47.6644 87.1775 47.9683 87.505ZM30.9224 87.01C31.3185 87.4225 31.874 87.67 32.435 87.67C32.7177 87.667 32.9969 87.607 33.2559 87.4936C33.5149 87.3802 33.7483 87.2157 33.9422 87.01C34.3446 86.5741 34.568 86.0027 34.568 85.4095C34.568 84.8163 34.3446 84.2449 33.9422 83.809C33.7483 83.6033 33.5149 83.4388 33.2559 83.3254C32.9969 83.212 32.7177 83.152 32.435 83.149C32.1514 83.1512 31.8712 83.2109 31.6112 83.3243C31.3512 83.4377 31.1169 83.6026 30.9224 83.809C30.5227 84.2451 30.301 84.8152 30.301 85.4067C30.301 85.9983 30.5227 86.5684 30.9224 87.0045V87.01ZM15.8237 79.1175C16.3187 79.64 17.0118 79.9425 17.7104 79.9425C18.0651 79.9397 18.4156 79.8652 18.7408 79.7234C19.066 79.5817 19.3591 79.3755 19.6025 79.1175C20.1054 78.5721 20.3846 77.8574 20.3846 77.1155C20.3846 76.3736 20.1054 75.6589 19.6025 75.1135C19.3591 74.8555 19.066 74.6493 18.7408 74.5076C18.4156 74.3658 18.0651 74.2913 17.7104 74.2885C17.3565 74.292 17.0071 74.3669 16.6829 74.5086C16.3587 74.6504 16.0665 74.8561 15.8237 75.1135C15.3208 75.6589 15.0416 76.3736 15.0416 77.1155C15.0416 77.8574 15.3208 78.5721 15.8237 79.1175ZM5.41137 65.4225C6.00542 66.055 6.84149 66.4235 7.67755 66.4235C8.10381 66.4195 8.52483 66.3292 8.91525 66.1581C9.30567 65.9871 9.6574 65.7387 9.94924 65.428C10.5526 64.773 10.8876 63.915 10.8876 63.0245C10.8876 62.134 10.5526 61.276 9.94924 60.621C9.6574 60.3103 9.30567 60.062 8.91525 59.8909C8.52483 59.7198 8.10381 59.6295 7.67755 59.6255C7.25268 59.6298 6.83304 59.7197 6.44368 59.8898C6.05433 60.0599 5.70324 60.3067 5.41137 60.6155C4.8064 61.2708 4.47047 62.1299 4.47047 63.0218C4.47047 63.9136 4.8064 64.7727 5.41137 65.428V65.4225ZM1.59407 48.5265C1.93462 48.8872 2.34449 49.1754 2.79911 49.3738C3.25373 49.5723 3.74374 49.6769 4.23978 49.6815C4.73582 49.6769 5.22583 49.5723 5.68045 49.3738C6.13507 49.1754 6.54494 48.8872 6.88549 48.5265C7.58901 47.7628 7.97956 46.7625 7.97956 45.7243C7.97956 44.686 7.58901 43.6857 6.88549 42.922C6.54558 42.562 6.1366 42.2742 5.68297 42.0757C5.22935 41.8773 4.74039 41.7723 4.24528 41.767C3.74831 41.7708 3.25725 41.8751 2.80164 42.0736C2.34602 42.2721 1.93526 42.5607 1.59407 42.922C0.890544 43.6857 0.5 44.686 0.5 45.7243C0.5 46.7625 0.890544 47.7628 1.59407 48.5265ZM5.01534 31.735C5.40459 32.1475 5.87324 32.4771 6.39312 32.704C6.913 32.9308 7.47338 33.0502 8.04058 33.055C8.60779 33.0502 9.16817 32.9308 9.68805 32.704C10.2079 32.4771 10.6766 32.1475 11.0658 31.735C11.871 30.8624 12.3181 29.7186 12.3181 28.5312C12.3181 27.3439 11.871 26.2001 11.0658 25.3275C10.677 24.914 10.2086 24.5833 9.68871 24.3555C9.1688 24.1277 8.60818 24.0075 8.04058 24.002C7.47299 24.0075 6.91236 24.1277 6.39246 24.3555C5.87256 24.5833 5.40412 24.914 5.01534 25.3275C4.21014 26.2001 3.76304 27.3439 3.76304 28.5312C3.76304 29.7186 4.21014 30.8624 5.01534 31.735ZM14.9656 18.26C15.8567 19.206 17.1108 19.756 18.3759 19.756C19.63 19.756 20.8841 19.206 21.7752 18.26C22.6793 17.2781 23.1812 15.9922 23.1812 14.6575C23.1812 13.3228 22.6793 12.0369 21.7752 11.055C21.338 10.5888 20.8109 10.2159 20.2258 9.95883C19.6407 9.70173 19.0095 9.56572 18.3704 9.559C17.1108 9.559 15.8567 10.109 14.9656 11.055C14.0615 12.0369 13.5596 13.3228 13.5596 14.6575C13.5596 15.9922 14.0615 17.2781 14.9656 18.26ZM29.4923 10.725C30.4824 11.77 31.874 12.3805 33.2711 12.3805C34.6682 12.3805 36.0598 11.7755 37.0499 10.725C38.0569 9.63473 38.6161 8.20511 38.6161 6.721C38.6161 5.23689 38.0569 3.80727 37.0499 2.717C36.564 2.20083 35.9788 1.78813 35.3295 1.50366C34.6801 1.21918 33.98 1.06879 33.2711 1.0615C32.5622 1.06879 31.8621 1.21918 31.2127 1.50366C30.5634 1.78813 29.9782 2.20083 29.4923 2.717C28.4865 3.80786 27.9281 5.23726 27.9281 6.721C27.9281 8.20474 28.4865 9.63414 29.4923 10.725ZM45.7901 10.6315C46.8792 11.7865 48.4138 12.4575 49.9539 12.4575C51.4941 12.4575 53.0232 11.7865 54.1123 10.6315C55.2182 9.43198 55.8322 7.86024 55.8322 6.22875C55.8322 4.59726 55.2182 3.02552 54.1123 1.826C53.5773 1.25653 52.9326 0.801189 52.217 0.48738C51.5015 0.173571 50.7298 0.00778463 49.9484 0C48.4083 0 46.8737 0.671 45.7846 1.826C44.6787 3.02552 44.0647 4.59726 44.0647 6.22875C44.0647 7.86024 44.6787 9.43198 45.7846 10.6315H45.7901ZM60.7293 18.073C61.9174 19.327 63.5895 20.0585 65.2617 20.0585C66.9448 20.0585 68.6169 19.327 69.7995 18.073C71.0056 16.7648 71.6752 15.0507 71.6752 13.2715C71.6752 11.4923 71.0056 9.77818 69.7995 8.47C69.2165 7.8493 68.5139 7.35295 67.7341 7.01079C66.9542 6.66863 66.1132 6.48774 65.2617 6.479C63.584 6.479 61.9174 7.2105 60.7293 8.47C59.5233 9.77818 58.8537 11.4923 58.8537 13.2715C58.8537 15.0507 59.5233 16.7648 60.7293 18.073ZM71.3892 31.6965C72.6763 33.0605 74.4859 33.8525 76.3066 33.8525C78.1217 33.8525 79.9369 33.0605 81.2185 31.6965C82.525 30.2788 83.2503 28.4214 83.2503 26.4935C83.2503 24.5656 82.525 22.7083 81.2185 21.2905C80.5872 20.6188 79.8267 20.0816 78.9826 19.7111C78.1385 19.3406 77.2283 19.1445 76.3066 19.1345C74.4859 19.1345 72.6763 19.9265 71.3892 21.2905C70.0826 22.7083 69.3573 24.5656 69.3573 26.4935C69.3573 28.4214 70.0826 30.2788 71.3892 31.6965ZM75.7235 49.2305C77.1096 50.699 79.0568 51.5515 81.0204 51.5515C82.9786 51.5515 84.9258 50.699 86.3119 49.2305C87.7189 47.7032 88.5 45.7026 88.5 43.626C88.5 41.5494 87.7189 39.5488 86.3119 38.0215C85.6322 37.2972 84.8131 36.7177 83.9037 36.3179C82.9944 35.9181 82.0137 35.7062 81.0204 35.695C79.0568 35.695 77.1151 36.553 75.7235 38.0215C74.3153 39.5482 73.5334 41.5491 73.5334 43.626C73.5334 45.7029 74.3153 47.7038 75.7235 49.2305Z" fill="#CCB590"/>
</svg>
<p>Loading... Please wait......</p>
          </div>
          <p class="not-title">Didn’t Find What You’re Looking For?</p>
          <div class="not-spec">
          <p>Please fill in your details and one of our material experts will get back to you within 24 hours. For more </p>
          <p>information, contact us via E-mail at sales@samaterials.com</p>
          </div>
          </div>
            <div class="error-contact-content">
    <p class="error-contact-title">Unsure Which Diamonds to Choose?</p>
    <form action="" method="post" enctype="multipart/form-data">
      <div class="form-content">
        <div class="form-item">
          <span class="form-item-label"><span style="color: #ff5858">*</span>Your Name</span>
          <input type="text" name="nameInfo" id="nameInfo" />
          <div class="error-message">Please enter your name</div>
        </div>

        <div class="form-item not-verify">
          <span class="form-item-label">Company Name</span>
          <input type="text" name="companyName" id="companyName" />
        </div>
        <div class="form-item">
          <span class="form-item-label">
            <span style="color: #ff5858">*</span>
            You Email</span>
          <input type="text" name="email" id="email" />
          <div class="error-message" id="emailError"></div>
        </div>
        <div class="form-item">
          <span class="form-item-label"><span style="color: #ff5858">*</span>Country</span>
          <div class="select-dropdown">
            <p></p>
            <input
              type="hidden"
              name="country"
              id="country" />
            <div class="error-message" id="emailError"></div>
            <svg
              class="select-arrows"
              width="16"
              height="7"
              viewBox="0 0 16 7"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M1 0.999272L8 5.70898L15 0.999272"
                stroke="#868686"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
            <ul id="countryList">
            </ul>
          </div>
        </div>
        <div class="form-item">
          <span class="form-item-label"><span style="color: #ff5858">*</span>Phone number</span>
          <input type="text" name="phone" id="phone" />
          <div class="error-message" id="emailError">Please enter your Phone</div>
        </div>
        <div class="form-item">
          <span class="form-item-label"><span style="color: #ff5858">*</span>Message</span>
          <input type="text" name="message" id="message" />
          <div class="error-message" id="emailError">Please enter your Message</div>

        </div>
        <div class="form-item not-verify">
          <div class="form-check">
            <input name="checkbox" id="checkbox" type="checkbox" checked="checked" value=true />
            <span>Yes, please call me back</span>
          </div>
        </div>
        <div class="form-item">
          <div
            class="g-recaptcha"
            data-sitekey="6Ld2Y7AqAAAAAJSkpkIMDDM0bv0p6ypbtejaO_hc"></div>
        </div>
      </div>
      <div>
        <button id="handleSendBtn" class="dm-footer-form" type="button">Send Message</button>
      </div>
    </form>
  </div>
        </div>
      `);

    $(".select-dropdown").click(function () {
      var dropdown = $(this)
      var ul = dropdown.children('ul');
      var p = dropdown.find('p')
      var input = dropdown.find('input')
      // 如果为二级下拉
      if (ul.find('ul li').length) {
        var li = ul.find('ul li')
      } else {
        // 一级
        var li = ul.find('li')
      }

      var arrows = dropdown.find('.select-arrows')
      if (ul.css("display") == "none") {
        ul.slideDown("fast");
        arrows.css('transform', 'rotate(180deg)')
      } else {
        ul.slideUp("fast");
        arrows.css('transform', 'rotate(0)')
      }

      li.click(function () {
        var txt = $(this).text();
        var firstSelect = $(this).parent().prev().text();
        p.html(`${firstSelect} ${txt}`);
        input.val(`${firstSelect} ${txt}`);
        ul.slideUp("fast");
        arrows.css('transform', 'rotate(0)')
        // 如果选中的是 'Other'，则将 select-dropdown 的宽度设置为 50%
        if ($(this).parent().parent().hasClass('selfSelect')) {
          if (txt == 'Other') {
            dropdown.css('width', '50%');
            var itemssss = $(this).parent().parent().parent().find('.abcd');
            itemssss.css('width', '50%')
            // 展示 input
            dropdown.parent().find('.attribute_input').css('display', 'block');
          } else {
            dropdown.css('width', '100%');
            var itemssss = $(this).parent().parent().parent().find('.abcd');
            itemssss.css('width', '0')
            dropdown.parent().find('.attribute_input').css('display', 'none');
            dropdown.parent().find('.attribute_input').val('');
            dropdown.parent().find('.error-message').text(''); // 移除错误信息
          }
        }
      });
      dropdown.mouseleave(function () {
        ul.slideUp("fast");
        arrows.css('transform', 'rotate(0)')
      })
    });

    const $ul = $('#countryList');
    const countries = DropdownOptions.CountryListSelect;
    // 清空原有 li（防止重复渲染）
    $ul.empty();
    // 动态生成 li
    countries.forEach(country => {
      $ul.append(`<li data-value="${country.value}">${country.label}</li>`);
    });

    // 点击 li 事件
    $ul.on('click', 'li', function (e) {
      e.stopPropagation();
      const value = $(this).data('value');
      const label = $(this).text();
      $('#country').val(value);       // 写入 hidden input
      $('.select-dropdown p').text(label); // 显示选中文字
      $('#country').siblings('.error-message').removeClass('show');
      $('.select-dropdown').removeClass('open');
    });
    // 点击下拉框显示/隐藏 ul
    $('.select-dropdown').click(function (e) {
      e.stopPropagation();
      $(this).toggleClass('open');
    });

    // 点击其他地方关闭下拉
    $(document).click(function () {
      $('.select-dropdown').removeClass('open');
    });

    // 校验字段
    const validationRules = [
      {
        key: "nameInfo",
        required: true,
        maxLength: 50,
        errorMessage: {
          required: "Please enter your name",
          maxLength: "The length cannot exceed 50"
        }
      },
      {
        key: "companyName",
        required: false,
      },
      {
        key: "checkbox",
        required: false,
      },
      {
        key: "email",
        required: true,
        maxLength: 30,
        regex: regEmail,
        errorMessage: {
          required: "Please enter your email",
          maxLength: "The length cannot exceed 30",
          regex: "Please enter a valid email"
        }
      },
      {
        key: "country",
        required: true,
        errorMessage: {
          required: "Please Select your Country",
        }
      },
      {
        key: "phone",
        required: true,
        regex: regPhone,
        errorMessage: {
          required: "Please enter your Phone",
          regex: "Please enter a valid phone number"
        }
      },
      {
        key: "message",
        required: true,
        errorMessage: {
          required: "Please enter your message",
        }
      },
    ];

    // 校验函数
    function validateField (rule) {
      const $input = $(`#${rule.key}`);


      const $error = $input.siblings('.error-message');

      console.log($error);

      const value = $input.val().trim();

      // 必填校验
      if (rule.required && !value) {
        $error.text(rule.errorMessage.required).addClass('show');
        return false;
      }

      // 最大长度校验
      if (rule?.maxLength && value.length > rule.maxLength) {
        $error.text(rule.errorMessage.maxLength).addClass('show');
        return false;
      }

      // 正则校验
      if (rule?.regex && value && !rule?.regex.test(value)) {
        $error.text(rule.errorMessage.regex).addClass('show');
        return false;
      }

      // 校验通过
      $error.removeClass('show');
      return true;
    }

    function getFormValues () {
      let allValid = true;
      const formValues = {};
      validationRules.forEach(rule => {
        const $el = $("input[name='" + rule.key + "']");
        let value = "";
        if ($el.length) {
          if ($el.attr("type") === "hidden") {
            value = $el.val() || "";
          } else if ($el.attr("type") === "checkbox") {
            // ✅ 处理 checkbox
            value = $el.is(":checked"); // 直接返回 true/false
          } else {
            value = ($el.val() || "").trim();
          }
        }
        formValues[rule.key] = value;
        // 校验必填或有校验规则的字段
        if (rule.required || rule.regex) {
          if (!validateField(rule)) {
            allValid = false;
          }
        }
      });
      return allValid ? formValues : null;
    }


    // 发送信息
    $("#handleSendBtn").click(function () {
      const formValues = getFormValues();
      if (!formValues) return;
      console.log(formValues);
    })

  }

  //  移动端输入框监听 + 防抖
  $(".searchValue").on("input", debounce(function () {
    const inputVal = $(this).val().trim();
    console.log(inputVal);

    let dataPrams = [
      {
        link: '',
        id: 0,
        img: '../../img/mobile/results.png',
        title: 'CB4512 Monocrystalline Synthetic DiamondsCB4512 Monocrystalline Synthetic Diamonds'
      }, {
        link: '',
        id: 0,
        img: '../../img/mobile/results.png',
        title: 'CB4512  Synthetic DiamondsCB4512 Monocrystalline Synthetic Diamonds'
      }
    ]

    if (!inputVal) {
      $('.search-placeholder').show()
      $('.search-results').hide()
      $('.search-close-icon').hide()
    } else {
      $('.search-placeholder').hide()
      $('.search-results').show()
      $('.search-close-icon').show()

      const $container = $(".search-results");
      // 清空容器
      $container.empty();
      if (dataPrams.length) {
        // 遍历数组渲染
        dataPrams.forEach(item => {
          const regex = new RegExp(`(${inputVal})`, "ig");
          const highlightedText = item.title.replace(regex, `<span style="color:var(--dm-color-primary);font-weight:bold">$1</span>`);
          const html = `
            <div class="search-results-info">
      <a href="${item.link}">
        <img src="${item.img}" alt="">
      </a>
      <p class="results-text">${highlightedText}</p>
    </div>
  `;

          $container.append(html);
        });
      } else {
        // ✅ 没有数据时显示占位
        renderNoData($container)
      }
    }
  }, 300));   // 300ms 防抖

  // icon清除点击
  $('.search-close-icon').click(function () {
    $('.dm-header .searchValue').val('');
    $('.search-placeholder').show()
    $('.search-results').hide()
    $('.search-close-icon').hide()
  })

  // 导航栏菜单项选择
  // 导航数据
  const menuData = [
    {
      title: "Diamonds",
      list: [
        {
          content: "这里是 Diamond Shapes 的内容", img: "../../img/PC/lab-dm.png"
        }, {
          content: "这里是 Diamond Shapes 的内容", img: "../../img/PC/lab-dm.png"
        }
      ]
    },
    {
      title: "Diamond Shapes", list: [
        {
          content: "Shapes1 ", img: "../../img/PC/mask_group.png"
        }, {
          content: "Shapes2 ", img: "../../img/PC/mask_group.png"
        },
        {
          content: "Shapes3 ", img: "../../img/PC/mask_group.png"
        }, {
          content: "Shapes4 ", img: "../../img/PC/mask_group.png"
        }, {
          content: "Shapes5 ", img: "../../img/PC/mask_group.png"
        },
      ]
    },
    {
      title: "Diamond Guides", list: [
        {
          content: "这里是 Diamond Shapes 这里是 Diamond Shapes 的内容这里是 Diamond Shapes 的内容这里是 Diamond Shapes 的内容的内容", img: "../../img/PC/lab-dm.png"
        }, {
          content: "这里是 Diamond Shapes 的内容", img: "../../img/PC/lab-dm.png"
        }, {
          content: "这里是 Diamond Shapes 的内容", img: "../../img/PC/lab-dm.png"
        }, {
          content: "这里是 Diamond Shapes 的内容", img: "../../img/PC/lab-dm.png"
        }
      ]
    },
    {
      title: "Applications", list: [
        {
          content: "这里是 Diamond Shapes 的内容", img: "../../img/PC/lab-dm.png"
        }, {
          content: "这里是 Diamond Shapes 的内容", img: "../../img/PC/lab-dm.png"
        }
      ]
    },
    {
      title: "Our Story", list: [
        {
          content: "这里是 Diamond Shapes 的内容", img: "../../img/PC/lab-dm.png"
        }, {
          content: "这里是 Diamond Shapes 的内容", img: "../../img/PC/lab-dm.png"
        }
      ]
    },
    {
      title: "Blog", list: [
        {
          content: "这里是 Blog的内容", img: "../../img/PC/lab-dm.png"
        }, {
          content: "这里是 Blog的内容", img: "../../img/PC/lab-dm.png"
        },
        {
          content: "这里是 Blog的内容", img: "../../img/PC/lab-dm.png"
        }, {
          content: "这里是 Blog的内容", img: "../../img/PC/lab-dm.png"
        },
        {
          content: "这里是 BlogBlog的内容Blog的内容Blog的内容的内容", img: "../../img/PC/lab-dm.png"
        }, {
          content: "这里是 Blog的内容", img: "../../img/PC/lab-dm.png"
        },
      ]
    }
  ];


  function renderContent (item) {
    if (item.title === "Diamonds") {
      return `
      <div class="dm-select-shapes-body-dm">
        ${item.list.map(sub => `
          <div class="grid-item">
            <img src="${sub.img}" alt="">
            <p>${sub.content}</p>
          </div>
        `).join("")}
      </div>
    `;
    }
    if (item.title === "Diamond Shapes") {
      return `
      <div class="dm-select-shapes">
        ${item.list.map(sub => `
          <div class="grid-item">
           <a href="${sub.link}">
            <img src="${sub.img}" alt=""></img>
            </a>
            <p>${sub.content}</p>
          </div>
        `).join("")}
        </div>
    `;
    }

    if (item.title === "Diamond Guides") {
      return `
      <div class="dm-select-guides">
        ${item.list.map(sub => `
          <div class="grid-item">
            <p>${sub.content}</p>
          </div>
        `).join("")}
        </div>
    `;
    }

    if (item.title === "Applications") {
      return `
      <div class="dm-select-guides">
        ${item.list.map(sub => `
          <div class="grid-item">
            <p>${sub.content}</p>
          </div>
        `).join("")}
        </div>
    `;
    }

    if (item.title === "Our Story") {
      return `
      <div class="dm-select-guides">
        ${item.list.map(sub => `
          <div class="grid-item">
            <p>${sub.content}</p>
          </div>
        `).join("")}
        </div>
    `;
    }

    if (item.title === "Blog") {
      return `
      <div class="dm-select-guides">
        ${item.list.map(sub => `
          <div class="grid-item">
            <p>${sub.content}</p>
          </div>
        `).join("")}
        </div>
    `;
    }

    return "";
  }

  // 渲染导航和对应内容
  let html = "";
  menuData.forEach(item => {
    html += `
      <div class="dm-main-menu-item">
      <a class="dm-main-menu-item-a">
        <span class="menu-title">${item.title}</span>
      </a>
       <div class="dm-select-shapes-body" style="display:none;">
      ${renderContent(item)}
       </div>
    </div>
    `;
  });

  $(".menu-search-power").html(html);

  // 点击事件
  $(".menu-search-power").on("click", ".dm-main-menu-item-a", function (e) {
    e.preventDefault();
    const $item = $(this).closest(".dm-main-menu-item");
    const $content = $item.find(".dm-select-shapes-body");
    if ($content.is(":visible")) {
      // 当前内容可见 → 收回，同时取消高亮
      $content.slideUp("fast");
      $item.removeClass("active");
    } else {
      // 当前内容不可见 → 展开
      // 先收起其他内容并取消其他高亮
      $(".dm-main-menu-item").not($item).find(".dm-select-shapes-body").slideUp("fast");
      $(".dm-main-menu-item").not($item).removeClass("active");

      // 展开当前内容，高亮当前菜单
      $content.slideDown("fast");
      $item.addClass("active");
    }
  });

})